<template>
    <div class="package-item">
        <u--image
            :src="item.picUrl"
            width="180rpx"
            height="180rpx"
            :lazy-load="true"
            mode="aspectFill"
            radius="8rpx"
        ></u--image>
        <div class="right">
            <div class="top">
                <p class="name">{{ item.name || '' }}</p>
                <p class="num">已售：{{ item.salesCount || 0 }}</p>
            </div>
            <div class="footer">
                <span class="price"
                    ><span class="unit">¥</span>{{ item.price | formatMoney(2) }}</span
                >
                <u-button
                    v-if="showBuy"
                    color="#FA6400"
                    text="购买"
                    shape="circle"
                    :customStyle="{ width: '152rpx', margin: 0 }"
                    @click="toSettle"
                ></u-button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'PackageItem',
    props: {
        studyhallId: {
            type: Number,
            default: () => {
                return null;
            },
        },
        item: {
            type: Object,
            default: () => {
                return {};
            },
        },
        showBuy: {
            type: Boolean,
            default: () => {
                return false;
            },
        },
    },
    methods: {
        toSettle() {
            uni.navigateTo({
                url:
                    '/pages/package/settle?id=' + this.item.id + '&studyhallId=' + this.studyhallId,
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.package-item {
    padding: 22rpx 24rpx;
    background: #fff;
    border-radius: 24rpx;
    @include flexBox(space-between);
    .right {
        flex: 1;
        height: 180rpx;
        margin-left: 24rpx;
        @include flexBox(space-between, flex-start, column);
        .name {
            font-size: 28rpx;
            font-weight: 600;
            color: #2f2f2f;
            @include ellipsis(1);
        }
        .num {
            margin-top: 8rpx;
            font-size: 24rpx;
            color: #898989;
        }
        .footer {
            width: 100%;
            @include flexBox(space-between, center);
            .price {
                color: #fa6400;
                font-size: 36rpx;
                font-weight: 600;
                .unit {
                    font-size: 28rpx;
                }
            }
        }
    }
}
</style>
